<template>
	<view class="my-orders">
		<!-- 顶部标签栏 -->
		<view class="tab-bar">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index"
				class="tab-item"
				:class="{ active: activeTab === index }"
				@click="switchTab(index)"
			>
				{{ tab }}
			</view>
		</view>
		
		<!-- 订单列表内容 -->
		<view class="order-content">
			<!-- 空状态 -->
			<view v-if="orderList.length === 0" class="empty-state">
				<view class="empty-icon">
					<view class="info-icon">i</view>
				</view>
				<view class="empty-text">暂无数据</view>
			</view>
			
			<!-- 订单列表 -->
			<view v-else class="order-list">
				<view 
					v-for="order in orderList" 
					:key="order.id"
					class="order-item"
					@click="viewOrderDetail(order)"
				>
					<view class="order-header">
						<view class="order-title">{{ order.title }}</view>
						<view class="order-status" :class="order.statusClass">{{ order.status }}</view>
					</view>
					
					<view class="order-info">
						<view class="order-route">
							<view class="route-item">
								<view class="route-icon pickup">取</view>
								<view class="route-text">{{ order.pickup }}</view>
							</view>
							<view class="route-arrow">→</view>
							<view class="route-item">
								<view class="route-icon delivery">送</view>
								<view class="route-text">{{ order.delivery }}</view>
							</view>
						</view>
						
						<view class="order-price">¥{{ order.price }}</view>
					</view>
					
					<view class="order-footer">
						<view class="order-time">{{ order.time }}</view>
						<view class="order-actions">
							<button 
								v-if="order.canCancel" 
								class="action-btn cancel-btn"
								@click.stop="cancelOrder(order)"
							>
								取消订单
							</button>
							<button 
								v-if="order.canComplete" 
								class="action-btn complete-btn"
								@click.stop="completeOrder(order)"
							>
								完成订单
							</button>
							<button 
								v-if="order.canContact" 
								class="action-btn contact-btn"
								@click.stop="contactCustomer(order)"
							>
								联系客户
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 声明全局uni对象
declare const uni: any

// 数据定义
const tabs = ['全部', '待付款', '待接单', '待取货', '待送达', '已送达']
const activeTab = ref(0)

interface Order {
	id: string
	title: string
	status: string
	statusClass: string
	pickup: string
	delivery: string
	price: number
	time: string
	canCancel: boolean
	canComplete: boolean
	canContact: boolean
}

const orderList = ref<Order[]>([])

// 方法定义
const switchTab = (index: number) => {
	activeTab.value = index
	loadOrders()
}

const loadOrders = () => {
	// 模拟数据加载
	const mockOrders: Order[] = []
	
	// 根据activeTab.value来决定显示什么数据
	// 这里暂时设置为空数组来显示"暂无数据"状态
	if (activeTab.value === 0) {
		// 全部订单 - 可以在这里添加一些示例数据
		// mockOrders.push({
		//   id: '1',
		//   title: '快递代取',
		//   status: '进行中',
		//   statusClass: 'ongoing',
		//   pickup: '菜鸟驿站',
		//   delivery: '宿舍楼下',
		//   price: 5,
		//   time: '2024-01-01 10:00',
		//   canCancel: false,
		//   canComplete: true,
		//   canContact: true
		// })
	}
	
	orderList.value = mockOrders
}

const viewOrderDetail = (order: Order) => {
	uni.navigateTo({
		url: `/pages/order-detail/order-detail?id=${order.id}`
	})
}

const cancelOrder = (order: Order) => {
	uni.showModal({
		title: '确认取消',
		content: '确定要取消这个订单吗？',
		success: (res: any) => {
			if (res.confirm) {
				uni.showToast({
					title: '订单已取消',
					icon: 'success'
				})
				loadOrders()
			}
		}
	})
}

const completeOrder = (order: Order) => {
	uni.showModal({
		title: '确认完成',
		content: '确定完成这个订单吗？',
		success: (res: any) => {
			if (res.confirm) {
				uni.showToast({
					title: '订单已完成',
					icon: 'success'
				})
				loadOrders()
			}
		}
	})
}

const contactCustomer = (order: Order) => {
	uni.showActionSheet({
		itemList: ['拨打电话', '发送短信'],
		success: (res: any) => {
			if (res.tapIndex === 0) {
				uni.makePhoneCall({
					phoneNumber: '10086'
				})
			} else {
				uni.showToast({
					title: '发送短信功能',
					icon: 'none'
				})
			}
		}
	})
}

// 生命周期
onMounted(() => {
	loadOrders()
})
</script>

<style lang="scss" scoped>
.my-orders {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.tab-bar {
	background: #fff;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		font-size: 28rpx;
		color: #666;
		position: relative;
		
		&.active {
			color: #FF6E26;
			font-weight: bold;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 4rpx;
				background-color: #FF6E26;
				border-radius: 2rpx;
			}
		}
	}
}

.order-content {
	padding: 20rpx;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 200rpx 0;
	
	.empty-icon {
		width: 120rpx;
		height: 120rpx;
		background-color: #ddd;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		
		.info-icon {
			font-size: 60rpx;
			color: #fff;
			font-weight: bold;
		}
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #999;
	}
}

.order-list {
	.order-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
		
		.order-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.order-title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
			
			.order-status {
				font-size: 24rpx;
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				
				&.ongoing {
					background-color: #FFF3E0;
					color: #FF9800;
				}
				
				&.completed {
					background-color: #E8F5E8;
					color: #4CAF50;
				}
				
				&.pending {
					background-color: #E3F2FD;
					color: #2196F3;
				}
			}
		}
		
		.order-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.order-route {
				display: flex;
				align-items: center;
				flex: 1;
				
				.route-item {
					display: flex;
					align-items: center;
					
					.route-icon {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 20rpx;
						margin-right: 10rpx;
						
						&.pickup {
							background-color: #FF9800;
						}
						
						&.delivery {
							background-color: #4CAF50;
						}
					}
					
					.route-text {
						font-size: 24rpx;
						color: #666;
						max-width: 200rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				
				.route-arrow {
					margin: 0 20rpx;
					color: #ccc;
					font-size: 24rpx;
				}
			}
			
			.order-price {
				font-size: 32rpx;
				color: #FF6E26;
				font-weight: bold;
			}
		}
		
		.order-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.order-time {
				font-size: 24rpx;
				color: #999;
			}
			
			.order-actions {
				display: flex;
				gap: 20rpx;
				
				.action-btn {
					padding: 10rpx 20rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					border: 1rpx solid;
					
					&.cancel-btn {
						background: #fff;
						color: #999;
						border-color: #ddd;
					}
					
					&.complete-btn {
						background: #4CAF50;
						color: #fff;
						border-color: #4CAF50;
					}
					
					&.contact-btn {
						background: #FF6E26;
						color: #fff;
						border-color: #FF6E26;
					}
				}
			}
		}
	}
}
</style>
